<template>
  <view
    style="
      background: linear-gradient(135deg, #0986ff, #abdcff);
      min-height: 100vh;
    "
  >
    <!-- <u-navbar
      :autoBack="true"
      :placeholder="true"
      bgColor="transparent"
      leftIconSize="20"
      title="培训学院"
      titleStyle="color: #fff;"
      leftIconColor="#fff"
    ></u-navbar> -->
    <z-paging
      ref="paging"
      v-model="dataList"
      class="notice-list"
      @query="getList"
    >
      <view class="gf rel" style="height: 15vh; width: 100vw">
        <view class="fs28r abs l5 b15">随堂测验</view>
      </view>
      <view
        class=""
        style="
          border-radius: 30rpx 30rpx 0 0;
          min-height: 83vh;
          background-color: #f7f8fa;
          padding: 20rpx;
        "
      >
        <view class="mb20r">
          <u-search v-model="name" @custom="search" @clear="search"></u-search>
        </view>
        <u-collapse accordion>
          <u-collapse-item title="待参加">
            <view
              class="mt30r"
              style="padding: 20rpx"
              v-for="i in dataList.filter((item) => item.finished === 0)"
              :key="i.id"
            >
              <view
                class="rds10r"
                style="
                  min-height: 5vh;
                  background-color: #e9f1fe;
                  padding: 20rpx;
                "
              >
                <view class="b fs35r" style="color: #3676fc">
                  {{ i.title }}
                </view>
                <view class="fs24r">{{ i.description }}</view>
              </view>
              <!-- <view class="mt30r fs26r">测评期限:2024-07-22~2025-07-22</view> -->
              <!-- <view class="mt10r fs26r">测评时长:180分钟</view> -->
              <u-button
                customStyle="margin-top: 20rpx;min-height:60rpx"
                type="primary"
                text="立即参加"
                size="mini"
                @click="go(i)"
              ></u-button>
            </view>
          </u-collapse-item>

          <u-collapse-item title="历史测评">
            <view class="w100 rds10r ovh" style="min-height: 5vh">
              <view
                class="rds10r bgf mt30r"
                style="padding: 20rpx"
                v-for="i in dataList.filter((i) => i.finished == 1)"
                :key="i.id"
              >
                <view class="b">{{ i.title }}</view>
                <view
                  style="
                    padding: 5rpx;
                    background-color: #d3e3fd;
                    width: fit-content;
                    color: #7f7f7f;
                  "
                  class="rds15r fs20r mt10r"
                >
                  {{ i.description }}
                </view>
                <view class="f ac xb">
                  <view class="mt10r fs26r"></view>
                  <view style="width: 20vw">
                    <u-button
                      customStyle="margin-top: 20rpx;width: fit-content"
                      type="primary"
                      text="查看测评"
                      @click="toLook(i)"
                      size="mini"
                    ></u-button>
                  </view>
                </view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
    </z-paging>
  </view>
</template>

<script>
import { listTest } from "../../api/index";
export default {
  name: "peixunxueyuan",
  data() {
    return {
      dataList: [],
      name: "",
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log("下拉刷新");
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad() {
    this.getList();
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
  methods: {
    go(i) {
      const currentTime = this.formatDate(new Date());
      uni.navigateTo({
        url:
          "/pages/authentication/testQuestions?id=" +
          i.id +
          "&time=" +
          currentTime,
      });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      const hours = ("0" + date.getHours()).slice(-2);
      const minutes = ("0" + date.getMinutes()).slice(-2);
      const seconds = ("0" + date.getSeconds()).slice(-2);
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    toLook(i) {
      uni.navigateTo({
        url: "/pages/authentication/analysis?id=" + i.id,
      });
    },
    search() {
      this.getList(1, 10);
    },
    //
    getList(pageNo, pageNum = 10) {
      let data = {
        pageSize: pageNum,
        pageNum: pageNo,
        title: this.name,
      };
      listTest(data).then((res) => {
        console.log(res, "sadasdasdas");
        this.dataList = res.rows;
        this.$refs.paging.complete(res.rows);
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .u-line {
  border-bottom: unset !important;
}

::v-deep .u-cell__title-text {
  font-weight: 700;
  font-size: 34rpx;
}

::v-deep .u-cell__body {
  padding: 20rpx 0 !important;
}

::v-deep .u-cell__right-icon-wrap .u-icon__icon {
  font-size: 48rpx !important;
}

::v-deep .u-collapse-item__content__text {
  padding: 0 !important;
}
</style>
